<template>
  <div style="background-color: #f4fafe">
    <div class="tognlan">
      <div style="margin-left: 80px" class="tltext">
        <span>试卷名:{{ testPaper.name }} </span>
        <span style="margin-left: 50px"
          >总分:{{ testPaper.testPaperScore }}分</span
        >
      </div>
      <div style="margin-right: 20px">
        <el-button type="success" round @click="goback" class="active"
          >交卷</el-button
        >
      </div>
    </div>
    <div class="bigdiv">
      <div class="card">
        <div class="cardtext">答题卡</div>
        <hr />
        <div class="Main_head">
          <div
            v-for="(item, idx) in questions"
            :key="idx"
            @click="pages(idx)"
            style="margin-top: 10px;"
            :class="{ active: item.button }"
            class="main"
          >
            {{ idx + 1 }}
          </div>
          <!-- <span style="background-color: #03d3bd; margin-top: 10px">5</span> -->
        </div>
        <!-- <hr /> -->
      </div>
      <div class="content">
        <!-- <div style=" margin-top: 20px;margin-left: 20px;">我是题目</div> -->
        <!-- <div class="question">
          我是题目内容
          <div>
            <el-checkbox-group v-model="checkList">
              //选项内容
              <el-checkbox label=" A" class="optionbtn"></el-checkbox><br />
              <el-checkbox label=" B" class="optionbtn"></el-checkbox><br />
              <el-checkbox label=" C" class="optionbtn"></el-checkbox><br />
              <el-checkbox label="D" class="optionbtn"></el-checkbox><br />
              <el-checkbox label="E" class="optionbtn"></el-checkbox><br />
            </el-checkbox-group>
          </div>
          <div class="pwbtn" @click="changepd">
            查看答案
            <div v-if="pdresult === true">我是答案内容</div>
          </div>
        </div> -->
        <div class="topic_main">
          <div>题目</div>
          <div>共{{questions.length}}题</div>
        </div>

        <div class="question" v-for="(item, idx) in questions" :key="idx">
          <div>{{ `${idx + 1}.[${item.name}](${item.score})` }}</div>
          <div style="display: flex">
            <div v-html="`${md(item.content)}`"></div>
          </div>
          <div
            v-for="(Item, indx) in item.optionsList"
            :key="indx + 'hh'"
            style="display: flex; margin-top: 10px"
          >
            <div v-if="item.topicId == 1">
              <el-radio
                v-model="item.answer"
                :label="Item.id"
                style="margin-top: 0.625rem"
                @change="ChangeItem(idx)"
              >
                <div style="display: flex">
                  {{ letter[indx] }}:
                  <div v-html="`${md(Item.content)}`"></div>
                </div>
              </el-radio>
            </div>
            <div v-if="item.topicId == 2">
              <el-checkbox-group v-model="item.answerList">
                <el-checkbox
                  :label="Item.id"
                  :key="indx"
                  @change="ChangeItem(idx)"
                  style="margin-top: 1.25rem"
                >
                  <div v-html="`${md(Item.content)}`"></div>
                </el-checkbox>
              </el-checkbox-group>
            </div>
          </div>
          <div v-if="item.topicId == 3">
            <div
              v-for="(Item, indx) in exam"
              :key="indx + 'hh'"
              style="display: flex"
            >
              <el-radio
                v-model="item.answer"
                :label="Item.id"
                style="margin-top: 0.625rem"
                @change="ChangeItem(idx)"
              >
                <div>{{ letter[indx] }}:{{ Item.value }}</div>
              </el-radio>
            </div>
          </div>
          <div v-if="item.topicId == 4" style="height: 22.5rem">
            <quill-editor
              v-model="item.answer"
              style="
                height: 260px;
                background-color: white;
                margin-top: 1.25rem;
              "
            ></quill-editor>
          </div>
          <div v-if="item.topicId == 5" style="height: 22.5rem">
            <quill-editor
              v-model="item.answer"
              style="
                height: 260px;
                background-color: white;
                margin-top: 1.25rem;
              "
            ></quill-editor>
          </div>
        </div>
      </div>
      <div></div>
    </div>
  </div>
</template>

<script>
import marked from "marked";
import { TestManager } from "../../request/test.js";
export default {
  name: "mytest",
  data() {
    return {
      pdresult: true,
      checkList: [],
      Testid: this.$route.query.Testid,
      questions: [],
      letter: ["A", "B", "C", "D", "E", "F", "G", "H", "R", "J", "K", "L"],
      testPaper: {},
      exam: [
        {
          value: "正确",
          id: 1,
        },
        {
          value: "错误",
          id: 0,
        },
      ],
    };
  },
  methods: {
    changepd() {
      // console.log("忙上了");
      this.pdresult = !this.pdresult;
    },
    goback() {
     var singleList = [];
				var multipleList = [];
				var judgeList = [];
				var fillsList = [];
				var shortAnswer = [];
				let data = [];
				for (let i = 0; i < this.questions.length; i++) {
					// alert(this.danxuanti[i].id);
					if (this.questions[i].topicId !== 2) {
						singleList.push({
							questionId: this.questions[i].id,
							questionAnswer: this.questions[i].answer
						});

					} else if (this.questions[i].topicId === 2) {
						multipleList.push({
							questionId: this.questions[i].id,
							questionAnswer: this.questions[i].answerList.join(',')
						});
					}
				}
				data.push(...singleList);
				data.push(...multipleList);
				data.push(...judgeList);
				data.push(...fillsList);
				data.push(...shortAnswer);
				TestManager.addTestRecord(data, 480, this.Testid).then(res => {
					console.log(res);
					if (res.data.code == 500) {
						this.$message({
							message: res.data.message,
							type: 'warning'
						});
					} else {
						this.$message({
							message: '提交成功',
							type: 'success'
						});
						this.$router.push({'name':'ExamStatistics',params:{'AnswerRecord':res.data.data}});
						// localStorage.removeItem("Test");
					}


				})
    },
    getQuestionnaireTest() {
      var parmas = {
        id: this.Testid,
      };
       const loading = this.$loading({
        lock: true,
        text: "正在加载...",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      TestManager.getQuestionnaireTest(this.qs.stringify(parmas)).then((e) => {
        console.log(e);
        loading.close();
        this.question = e.data.data;
        this.textname = this.question.testPaper.name;
        this.questions = e.data.data.questions.map((q) => {
          return {
            ...q,
            answerList: [],
          };
        });
        console.log(this.questions);
        this.testPaper = e.data.data.testPaper;
      });
    },
    pages(id) {
      document.getElementsByClassName("question")[id].scrollIntoView();
    },
    ChangeItem(id) {
      this.questions[id].button = true;
      // this.$set(this.questions[id], 'button', true);
      // console.log(this.questions[id])
    },
    md(content) {
      return marked(content);
    },
  },
  created() {
    this.getQuestionnaireTest();
  },
};
</script>

<style lang="scss" scoped>
// * {
//   background-color: #ebeef5;
// }
.Main_head {
  display: flex;
  flex-wrap: wrap;
}
.main {
  height: 40px;
  width: 40px;
  line-height: 40px;
  text-align: center;
  background: seashell;
  margin: 10px;
  border-radius: 5px;
}
.tognlan {
  display: flex;
  background-color: white;
  justify-content: space-between;
  height: 70px;
  line-height: 70px;

  margin-right: 20px;
}
// .tltext {
//   margin-top: 20px;
//   flex: 1;
//   height: 30px;
//   background-color: white;
// }
.tltext {
  margin-left: 100px;
  font-weight: bold;
  font-size: 25px;
}
.tlbtn {
  margin-top: 50px;
  margin-right: 50px;
}
.cardtext {
  height: 20px;
  width: 300px;
  padding: 20px;
}

.cardbtn {
  margin-top: 10px;
  width: 300px;
  height: 400px;
}
.card {
  margin-top: 60px;
  margin-left: 80px;
  width: 20%;
  background-color: #fff;
}
.fivebtn {
  margin: 0;
  margin-top: 10px;
}
.bigdiv {
  display: flex;
}
.content {
  height: 700px;
  width: 70%;
  margin-left: 30px;
  margin-top: 60px;
  background-color: #fff;
  overflow: scroll;
}
// .content > span {
//   //   position: absolute;
//   //   top: 20px;
//   //   left: 20px;
// }
.question {
  width: 100%;
  min-height: 200px;
  margin-top: 20px;
}
.pwbtn {
  //   margin-bottom: 100px;
  margin-top: 150px;
  margin-left: 50px;
}
.optionbtn {
  margin: 10px 20px;
}
.question {
  flex: 5;
  display: flex;
  flex-direction: column;
  padding: 50px;
  border-bottom: 1px solid #dfdfdf;
}

.question li {
  list-style: none;
  display: block;
  height: 40px;
  margin-left: 1.875rem;
  display: flex;
  align-items: center;
}

.question span {
  display: inline-block;
  height: 20px;
  padding: 2px 5px;
  border-radius: 3px;
  border: 1px solid #fdf6ec;
}

.question .yes {
  background: #f0f9eb;
  color: #97d3bf;
}

.question .no {
 background-color: #ffaa00;
 color: white;
}

.left {
  margin-top: 3.25rem;
  background-color: #ffffff;
  width: 100px;
  text-align: center;
}

.left div {
  margin-top: 0.875rem;
}

.Bottom {
  position: absolute;
  bottom: 0;
  overflow: hidden;
  display: flex;
}

#videobox {
  flex-shrink: 0;
}

#video {
  width: 100%;
}

#canvas {
  position: absolute;
  z-index: -1;
}

.active {
  background-color: #03d3bd;
  color: white;
  border: none;
}

.el-radio {
  display: flex;
  margin-top: 0.625rem;
}
.topic_main {
  display: flex;
  justify-content: space-between;
  padding: 20px;
}
</style>